<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { on, off } from 'view-design/src/utils/dom'
import { setMatchMedia } from 'view-design/src/utils/assist'

import { mapMutations } from 'vuex'
import { SystemLogout } from '@/api/system/login'
setMatchMedia()

export default {
  name: 'app',
  methods: {
    // ...mapActions('system/account', ['logout']),
    ...mapMutations('system/layout', ['setDevice']),
    ...mapMutations('pub/layout', ['updateLayoutSetting']),
    handleWindowResize() {
      this.handleMatchMedia()
    },
    handleMatchMedia() {
      const matchMedia = window.matchMedia
      // console.log(matchMedia)
      this.$nextTick(() => {
        let elHeight = $('#app').outerHeight() - 150
        this.updateLayoutSetting({ key: 'elMain', value: elHeight })
      })
      if (matchMedia('(max-width: 600px)').matches) {
        this.setDevice('Mobile')
      } else if (matchMedia('(max-width: 992px)').matches) {
        this.setDevice('Tablet')
      } else {
        this.setDevice('Desktop')
      }
    },
  
  },
  async mounted() {
    on(window, 'resize', this.handleWindowResize)
    this.$store.dispatch('system/account/load')
    setTimeout(() => {
      this.handleMatchMedia()
    }, 500)
  },
  beforeDestroy() {
    off(window, 'resize', this.handleWindowResize)

  },
}
</script>
